<template>
  <div class="wrap" :style="{minHeight:$store.state.minHeight-.91+'rem'}">
    <div class="empty" v-if="orderList.length<1">
      <img src="../../../../static/img/orderNo.png" alt="">
      <p>暂无订单喔~</p>
    </div>
    <div class="boxWrap" v-if="orderList.length>=1">
      <div class="box" v-for="(x,y) in orderList">
        <div class="box-h">
          <div class="box-img" @click="shopInfo(x.goods_list[0].store_id)">
            <img :src="$store.state.imgurlApi+x.door_photo_image" alt="">
            <p>{{x.nickname}}</p>
            <img src="../../../../static/img/yj11.png" alt="">
          </div>
          <p>配送中</p>
        </div>
        <div class="item" v-for="(n,m) in x.goods_list.slice(0,3)">
          <img :src="$store.state.imgurlApi+n.image" alt="">
          <div class="item-r">
            <div class="item-h">
              <p><img src="../../../../static/img/zhe_1.png" alt=""><span>{{n.title}}</span></p>
              <p><span>￥{{n.original_price}}</span>￥{{n.price}}</p>
            </div>
            <!--<p><span>x</span>{{JSON.parse(x.product_id)[m].number}}</p>-->
            <p><span v-for="p in JSON.parse(x.product_id)[m].gg">{{p}}&ensp;</span>&emsp;<span>x</span>{{JSON.parse(x.product_id)[m].number}}
            </p>
          </div>
        </div>
        <el-collapse-transition>
          <div v-show="showList[y].look">
            <div class="transition-box">
              <div class="item" v-for="(u,i) in x.goods_list.slice(3,)">
                <img :src="$store.state.imgurlApi+u.image" alt="">
                <div class="item-r">
                  <div class="item-h">
                    <p><img src="../../../../static/img/zhe_1.png" alt=""><span>{{u.title}}</span></p>
                    <p><span>￥{{u.original_price}}</span>￥{{u.price}}</p>
                  </div>
                  <p><span v-for="p in JSON.parse(x.product_id)[i+3].gg">{{p}}&ensp;</span>&emsp;<span>x</span>{{JSON.parse(x.product_id)[i+3].number}}
                  </p>
                  <!--<p><span>x</span>{{JSON.parse(x.product_id)[i].number}}</p>-->
                </div>
              </div>
            </div>
          </div>
        </el-collapse-transition>
        <p @click="showLook(y)" class="xjt" v-show="x.goods_list.length>3">
          <img :src="showList[y].look?'../../static/img/sjt111.png':'../../static/img/xiajiantou11.png'" alt=""><span>{{showList[y].look?'收起':'展开更多'}}</span>
        </p>
        <div class="box-bot">
          <p>共{{shopNumber(JSON.parse(x.product_id))}}件商品，实付<span>￥{{x.total_price}}</span></p>
        </div>
        <div class="box-btn">
          <p @click="Fun('再来一单',x)">再来一单</p>
          <p @click="Fun('查看详情',x)">查看详情</p>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  export default {
    name: "completed",
    data() {
      return {
        orderList: [], // 订单列表
        showList: []
      }
    },
    created() {
      // 请求所有订单列表
      this.$myAxios('index/Order/check', 'post', {
        user_id: this.$myStorage.query(),
        status: 5
      }).then(res => {
        var data = res.data;
        console.log(res.data);
        if (res.data.state == 0) {
          this.$myNotice('请检查网络~', 1500);
        } else {
          this.orderList = data;
          for (var i in this.orderList) {
            this.showList.push({
              look: false
            });
          }
          console.log(this.orderList);
        }
      })
    },
    computed: {
      shopNumber() {
        return (data) => {
          var num = 0;
          for (var i of data) {
            num += i.number * 1
          }
          return num;
        }
      }
    },
    methods: {
      showLook(y) {
        var arr = [...this.showList];
        arr[y].look = !arr[y].look;
        this.showList = arr;
      },
      shopInfo(id) {
        this.$router.push({
          name: 'shopInfo',
          query: {
            id
          }
        })
      },
      Fun(type,x){
        if (type == '再来一单') {

        } else {
          // 查看详情
          this.$router.push({
            name:'orderDetails',
            query:{
              id:x.order_id
            }
          });
        }
      }
    },
    watch: {
      orderList() {
        console.log(1)
      }
    }
  }
</script>

<style scoped>

  .box {
    width: 3.53rem;
    box-sizing: border-box;
    background: rgba(255, 255, 255, 1);
    box-shadow: 0 .03rem .15rem 0 rgba(4, 0, 0, 0.15);
    border-radius: .07rem .07rem .07rem .07rem;
    margin: .1rem auto;
    padding: 0 .1rem;
  }

  .box-h {
    height: .5rem;
    display: flex;
    flex-flow: row;
    justify-content: space-between;
    align-items: center;
    box-sizing: border-box;
    border-bottom: .01rem solid #EEEEEE;
  }

  .box-img {
    display: flex;
    flex-flow: row;
    align-items: center;
  }

  .box-img > p {
    color: #171717;
    max-width: 1.5rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: .15rem;
    font-family: PingFang SC;
    font-weight: bold;
  }

  .box-img > img:nth-child(1) {
    width: .26rem;
    height: .26rem;
    border-radius: 100%;
    margin-right: .12rem;
  }

  .box-img > img:nth-child(3) {
    width: .06rem;
    height: .11rem;
    border-radius: 100%;
    margin-left: .1rem;
  }

  .item {
    width: 100%;
    height: .5rem;
    box-sizing: border-box;
    display: flex;
    flex-flow: row;
    justify-content: flex-start;
    align-items: center;
    margin: .1rem auto;
  }

  .item > img:nth-child(1) {
    width: .5rem;
    height: .5rem;
    border-radius: .03rem;
    margin-right: .1rem;
  }

  .item-r {
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    padding-bottom: .02rem;
    display: flex;
    flex-flow: column;
    justify-content: space-between;
  }

  .item-h {
    width: 100%;
    display: flex;
    flex-flow: row;
    justify-content: space-between;
    align-items: center;
  }

  .item-h > p:nth-child(1) > img {
    width: .16rem;
    height: .16rem;
    margin-right: .1rem;
  }

  .item-h > p:nth-child(1) {
    display: flex;
    flex-flow: row;
    align-items: center;
  }

  .item-h > p:nth-child(1) > span {
    font-size: .13rem;
    font-family: PingFang SC;
    font-weight: 500;
    color: #333333;
  }

  .item-h > p:nth-child(2) {
    color: #333333;
    font-size: .14rem;
    font-family: PingFang SC;
    font-weight: bold;
  }

  .item-h > p:nth-child(2) > span {
    color: #999999;
    font-size: .12rem;
    font-family: PingFang SC;
    font-weight: 500;
    text-decoration: line-through;
    padding-right: .1rem;
  }

  .item-r > p {
    font-size: .14rem;
    color: #666666;
    font-family: PingFang SC;
    font-weight: 500;
  }

  .item-r > p > span {
    font-size: .12rem;
  }

  .box-bot {
    height: .4rem;
    display: flex;
    flex-flow: row;
    justify-content: flex-end;
    align-items: center;
    font-size: .13rem;
    font-family: PingFang SC;
    font-weight: 500;
    color: #666666;
    border-bottom: .01rem solid #EEEEEE;
  }

  .box-bot > p > span {
    color: #333333;
    font-size: .16rem;
    font-family: PingFang SC;
    font-weight: bold;
    padding-left: .05rem;
  }

  .box-btn {
    height: .6rem;
    display: flex;
    flex-flow: row;
    align-items: center;
    justify-content: flex-end;
  }

  .box-btn > p:nth-child(2) {
    padding: 0 .1rem;
    height: .31rem;
    background: linear-gradient(0deg, rgba(255, 142, 65, 1), rgba(255, 110, 0, 1));
    box-shadow: 0 .04rem .11rem 0 rgba(255, 112, 5, 0.4);
    border-radius: .16rem;
    font-size: .13rem;
    font-family: PingFang SC;
    font-weight: 400;
    color: #ffffff;
    text-align: center;
    line-height: .31rem;
    margin-left: .25rem;
  }

  .box-btn > p:nth-child(1) {
    padding: 0 .1rem;
    height: .31rem;
    box-sizing: border-box;
    border: .01rem solid #E5E5E5;
    border-radius: .16rem;
    font-size: .13rem;
    font-family: PingFang SC;
    font-weight: 400;
    color: #565656;
    text-align: center;
    line-height: .31rem;
  }

  /* 空状态 */
  .empty {
    padding: .5rem 0;
    width: 100%;
    display: flex;
    flex-flow: column;
    align-items: center;
  }

  .empty > img {
    width: 65%;
    margin-bottom: .15rem;
  }

  .empty > p {
    font-size: .16rem;
    font-family: PingFang SC;
    font-weight: 400;
    color: #565656;
  }


  .xjt {
    display: flex;
    flex-flow: row;
    align-items: center;
    justify-content: center;
  }

  .xjt > img {
    width: .12rem;
    height: .07rem;
    margin-right: .1rem;
  }

  .xjt > span {
    font-size: .13rem;
    font-family: PingFang SC;
    font-weight: 500;
    color: #C0C0C0;
  }

  .transition-box > div:nth-last-child(1) {
    margin: 0;
  }
</style>
